import { View, Text, ScrollView } from 'react-native';
import React, { useState, useEffect } from 'react';
import {
    VictoryLine, VictoryChart, VictoryTheme, VictoryZoomContainer,
    VictoryPie, VictoryAxis,
} from 'victory-native';
import PropTypes from 'prop-types';
import moment from 'moment';
import { Calendar } from 'react-native-calendars';
import { WingBlank, WhiteSpace } from '@ant-design/react-native';
import styles from './styles';
import { getDay } from '../../utils/common';

const DataStatisticsView = ({ getDailyData, dailyData, impCount }) => {
    const [dailyformat, setDailyformat] = useState([]);
    const [monthDay, setMonthDay] = useState([]);
    useEffect(() => {
        setMonthDay(getDay(moment(new Date()).format('YYYY'), moment(new Date()).format('M')));
    }, []);
    useEffect(() => {
        setDailyformat(dailyData.map(row => ({
            // ...row,
            x: moment(row.date).format('M-DD'),
            y: parseFloat(row.worktime),
        })));
    }, [dailyData]);
    return (
        <View>
            <ScrollView>
                <WingBlank>
                    <Text style={styles.title}>每日工作时长一览</Text>
                    <View style={styles.lineContainer}>
                        <View style={{ marginTop: 5 }}>
                            <Calendar
                                // current="2022-02-15"
                                minDate="1900-05-10"
                                maxDate="2030-05-30"
                                enableSwipeMonths
                                hideDayNames
                                monthFormat="MMM yyyy"
                                onMonthChange={(month) => {
                                    getDailyData((moment(month.dateString).format('YYYY-MM')));
                                    setMonthDay(getDay(moment(month.dateString).format('YYYY'),
                                        moment(month.dateString).format('M')));
                                }}
                                dayComponent={() => (<View />)}
                            />
                        </View>
                        <View style={styles.line}>
                            <VictoryChart
                                width={400}
                                height={300}
                                theme={VictoryTheme.material}
                                containerComponent={(
                                    <VictoryZoomContainer
                                        zoomDomain={{ x: [1, 7] }}
                                        zoomDimension="x"
                                        minimumZoom={{ x: 1, y: 100 }}
                                    />
                                )}
                            >
                                <VictoryLine
                                    data={dailyformat}
                                    domain={{ x: [0, 31], y: [0, 24] }}
                                    // x="date"
                                    // y="worktime"
                                    labels={({ datum }) => datum.y}
                                    style={{
                                        data: {
                                            stroke: '#0079FF',
                                            // strokeWidth: ({ data }) => data.length,
                                        },
                                        labels: {
                                            fontSize: 16,
                                            fill: ({ datum }) => (
                                                datum.x === 3 ? '#000000' : '#0079FF'
                                            ),
                                        },
                                    }}
                                />
                                <VictoryAxis
                                    dependentAxis
                                    width={400}
                                    height={400}
                                    domain={[0, 24]}
                                    theme={VictoryTheme.material}
                                    offsetY={200}
                                    standalone={false}
                                />
                                <VictoryAxis
                                    theme={VictoryTheme.material}
                                    tickValues={monthDay}
                                />
                            </VictoryChart>
                        </View>
                    </View>
                    <View>
                        <Text style={styles.title}>重要事务情况</Text>
                        <View style={styles.container}>
                            <VictoryPie
                            // name="series-1"
                                colorScale={['tomato', 'orange', '#5AC975']}
                                data={impCount}
                                style={{
                                    labels: {
                                        fontSize: 12, fill: '#0079FF',
                                    },
                                }}
                                labels={({ datum }) => `${datum.x}:${datum.y}`}
                                width={400}
                                height={300}
                            />
                        </View>
                    </View>
                    <WhiteSpace />
                </WingBlank>
            </ScrollView>
        </View>
    );
};
DataStatisticsView.defaultProps = {
    dailyData: [],
    impCount: [],
    getDailyData: () => {},
};
DataStatisticsView.propTypes = {
    dailyData: PropTypes.arrayOf(PropTypes.any),
    impCount: PropTypes.arrayOf(PropTypes.any),
    getDailyData: PropTypes.func,
};
export default DataStatisticsView;
